<!--
    group: 我的账户
    name: 账户充值
    url: /myAccount/accountRecharge
-->
<template>
  <div class='content'>
    <div class='header-div'>
      <div class='title'>账户充值</div>

      <div class='container-div'>
<!--        <div class='container-title'>
          请前往：
          <span v-if='protocolType == 1'>
            <a-button @click="goTo(protocolType)" type='primary'>渠道账户充值</a-button>
            （账户余额：<span class='balance'>{{ Math.round(balance * 100) / 10000 }} </span>元）
          </span>
          <a-button v-else-if='protocolType == 2' @click="goTo(protocolType)" type='primary'>前往企业账户充值</a-button>
        </div>-->
        <balanceQuery :balanceConfig='balanceConfig' @goTo='goTo'></balanceQuery>
      </div>

    </div>
    <div class='container-div'>
      <div class='container-title'>账户变动记录</div>
      <div>
        <div class="table-page-search-wrapper" style="margin-top: 10px;">
          <a-form layout="inline">
            <a-row :gutter="24" style="margin-top: 10px">
              <a-col :md="5" :lg="5" :xl="5" :xxl="4">
                <a-form-item label="交易类型" v-bind="formItemFlex['2']">
                  <a-select v-model="queryParam.bizType" placeholder="请选择交易类型">
                    <a-select-option v-for="item in businessTypeData.optionList" :value="item.value">{{ item.label
                    }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="6" :lg="6" :xl="6" :xxl="4">
                <a-form-item label="交易时间" v-bind="formItemFlex['3']">
                  <a-range-picker v-model="queryParam.time" @change="onChangeTime" format="YYYY-MM-DD HH:mm:ss" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="10">
                <span class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuerys" icon="search">查询</a-button>
                  <a-button @click="searchResets" icon="reload" style="margin-left: 10px">重置</a-button>
                  <a-button type="primary" @click="handleExportXlsFun(exportObj)" icon="download"
                    style="margin-left: 10px">导出表单</a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <a-table ref="table" bordered rowKey="id" :columns="columns" :dataSource="tableData" :pagination="ipagination"
          :loading="loading" @change="handleTableChange">
          <span slot="entName" slot-scope="text, record">
            <j-ellipsis :value="text" :length="10" />
          </span>
          <span slot="bizType" slot-scope="text, record">
            {{ businessTypeData.tableTypeKeyName[text] }}
          </span>
          <span slot='orderName' slot-scope='text,record'>
            <span v-if='record.bizType == 999 || record.bizType == 1000'>{{record.bizTypeStr}}</span>
            <span v-else>{{text}}</span>
          </span>
          <span slot="status" slot-scope="text, record">
            {{ { 1: '处理中', 2: '支付成功', 3: '支付失败',5:'退款成功' }[text] }}
          </span>

          <span slot="entName" slot-scope="text, record">
            <template>
              <span v-if='!record.entId && !record.entName'>{{ record.channelName }}</span>
              <span v-else-if='record.entId && !record.entName'>名称待定：（ID：{{ record.entId }}）</span>
              <span v-else>{{record.entName}}</span>
            </template>

          </span>
          <span slot="amount" slot-scope="text, record">
            <span v-if='record.flowDir == 1' class="green">+{{ Math.round(text * 100) / 10000 }} 元</span>
            <span v-else-if='record.flowDir == 2' class="red">-{{ Math.round(text * 100) / 10000 }} 元</span>
          </span>
          <span slot="balance" slot-scope="text, record">
            <span>{{ Math.round(text * 100) / 10000 }} 元</span>
          </span>
          <span slot='clientName' slot-scope='text,record'>
            <template v-if='record.bizType == 999 || record.bizType == 1000'>
              <p>{{record.clientName}}</p>
              <p>{{record.clientAccount}}</p>
            </template>
            <template v-else>
              --
            </template>
          </span>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getFundAccountQueryChangeInfo, getFundSubBalance, getOrderPayPaidList, getProtocolType } from '@api/account'
import { handleExportXlsNew } from '@/common/newHandleExportXls'
import { cloneObject, Storage } from '@/utils/util'
import balanceQuery from '@views/myAccount/modules/balanceQuery'

const formItemFlex = {
  1: { labelCol: { md: 8, lg: 8, xl: 8, xxl: 6, }, wrapperCol: { md: 8, lg: 8, xl: 8, xxl: 6, } },
  2: { labelCol: { md: 8, lg: 8, xl: 8, xxl: 6 }, wrapperCol: { md: 8, lg: 8, xl: 8, xxl: 6 } },
  3: { labelCol: { md: 8, lg: 8, xl: 8, xxl: 6 }, wrapperCol: { md: 8, lg: 8, xl: 8, xxl: 6 } }
}

export default {
  name: 'accountRecharge',
  components:{
    balanceQuery
  },
  data() {
    return {
      formItemFlex,
      value: 1,
      tableData: [],
      businessTypeData: [],
      loading: true,
      toggleSearchStatus: false,
      queryParam: {},
      balanceConfig:{
        protocolType:null,
        balanceList:[]
      },
      exportObj: {
        name: '导出明细',
        extension:'.xlsx',
        url: '/qsb/fund/account/query/change/info/export',
        data: {}
      },
      columns: [
        {
          title: '交易时间',
          align: 'center',
          width: 180,
          dataIndex: 'time',
          scopedSlots: { customRender: 'time' },
        },
        {
          title: '业务订单号',
          align: 'center',
          width: 140,
          dataIndex: 'orderId',
        },
        {
          title: '交易类型',
          dataIndex: 'tranBizLabelName',
          align: 'center',
          width: 130,
        },
        {
          title: '交易状态',
          align: 'center',
          width: 120,
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '交易金额',
          align: 'center',
          width: 100,
          dataIndex: 'amount',
          scopedSlots: { customRender: 'amount' },
        },
        {
          title: '支付方类型',
          align: 'center',
          width: 150,
          dataIndex: 'tranName',
        },
        {
          title: '充值账户',
          align: 'center',
          width: 150,
          dataIndex: 'clientName',
          scopedSlots: { customRender: 'clientName' },
        },
        {
          title: '账户余额',
          align: 'center',
          width: 160,
          fixed:'right',
          dataIndex: 'balance',
          scopedSlots: { customRender: 'balance' },
        }
      ],
      url: '/myAccount/channelAccount',
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return " 共" + total + "条"
        },
        showSizeChanger: true,
      },
    };
  },
  created() {
    this.getFundSubBalanceFun()
    this.getFundAccountQueryChangeInfoFun()
    this.businessTypeData = Storage.get('BusinessType');
    this.getProtocolTypeFun();
  },
  methods: {
    //下载文件 用于excel导出
    handleExportXlsFun(exportObj) {
      exportObj.data = this.queryParam;
      return handleExportXlsNew(exportObj, this)
    },
    //查询总包分包
    getProtocolTypeFun() {
      getProtocolType().then(res => {
        if (res.success) {
          this.balanceConfig.protocolType = res.result;
        } else {
          this.$message.warning(res.message)
        }
      })
    },

    //查询
    searchQuerys() {
      this.getFundAccountQueryChangeInfoFun();
    },
    //重置
    searchResets() {
      this.ipagination.current = 1;
      this.queryParam = {};
      this.getFundAccountQueryChangeInfoFun();
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      this.ipagination = pagination;
      this.getFundAccountQueryChangeInfoFun();
    },
    //余额查询
    getFundSubBalanceFun() {
      let params = {};
      params.clientType = 2;  //1企业  2渠道
      getFundSubBalance(params).then(res => {
        if (res.success) {
          let data = res.result;
          this.balanceConfig.balanceList = data.balanceInfoVoList;
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    //账户变动记录
    getFundAccountQueryChangeInfoFun() {
      this.loading = true;
      let params = {}; //查询条件
      let paramsNew = cloneObject(this.queryParam);
      if(this.queryParam.bizType){
        paramsNew.bizType = [];
        paramsNew.bizType.push(this.queryParam.bizType)
      }
      params.data = paramsNew;
      params.pageNo = this.ipagination.current;
      params.pageSize = this.ipagination.pageSize;
      getFundAccountQueryChangeInfo(params).then(res => {
        if (res.success) {
          // // 赋值表格数据
          let data = res.result;
          this.tableData = data.records || [];
          // 赋值总条数
          this.ipagination.total = data.total || 0;
          this.loading = false;
        } else {
          this.$message.warning(res.message)
        }

      })
    },
    //时间选择
    onChangeTime(date, dateString) {
      this.queryParam.beginTime = dateString[0];
      this.queryParam.endTime = dateString[1];
    },
    goTo(typeObj) {
      let url = '';
      if (typeObj.protocolType == 1) {
        url = '/myAccount/channelAccount'
      } else if (typeObj.protocolType == 2) {
        url = '/myAccount/entAccountList'
      }
      this.$router.push({
        path: url,
        query:{
          pagetab:typeObj.pagetab
        }
      });
    },
  },
}
</script>

<style scoped lang='less'>
.content {
  background: #fff;
  box-sizing: border-box;
  padding: 20px;

  .title {
    font-size: 20px;
    font-weight: 600;
    color: #222;
    padding: 10px 0 30px;
    border-bottom: 1px solid #ccc;
  }

  .container-div {
    border-bottom: 1px solid #ccc;

    .container-title {
      font-size: 16px;
      font-weight: 600;
      color: #333333;
      padding: 20px 0;
    }

    .balance {
      font-size: 18px;
      color: #4167E8;
    }
  }

}
</style>
